import { defineComponent, ref, reactive } from "vue";
import LPopup from "@/components/public/lPopup/lPopup";
import LTable from "@/components/public/lTable/lTable";
import styles from "./ChannelSaler.module.less";
import { EditOutlined, SearchOutlined } from "@ant-design/icons-vue";
import promotionChannelSalerService from "@/modules/individualOrdersManagement/promotion/promotionChannelSaler.service";
import { $spreadGetSalerQrcode } from "@/api/promotion/promotion";
import ChannelSalerAdd from "./ChannelSalerAdd/ChannelSalerAdd";
import Qrcode from "./qrcode/qrcode";
export default defineComponent({
  setup(props: any, { expose }) {
    const $promotionChannelSalerService = new promotionChannelSalerService();
    const popupRef = ref(null as any);
    const LTableRef = ref(null as any);
    const qrcodeRef = ref(null as any);
    const channelSalerAddRef = ref(null as any);
    const state = reactive({
      is_open: false,
      qrcodeLoading: false,
    })
    const table_state = reactive({
      toolbar: {
        left: ["refresh", "add"],
        right: [],
        add: {
          handler: () => {
            channelSalerAddRef.value.open(table_state.query.channel_id);
          }
        },
      },
      query: {
        channel_id: "" as any,
      },
      dataSource: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
          align: "center",
          width: "80px",
        },
        {
          title: "人员名称",
          dataIndex: "name",
          align: "center",
          width: "220px",
        },
        {
          title: "联系电话",
          dataIndex: "mobile",
          align: "center",
          width: "220px",
        },
        {
          title: "出单数",
          dataIndex: "policy_num",
          align: "center",
          width: "220px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "180px",
        },
      ],
      loading: false,
      searchForm: {},
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    })
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      table_state.pagination.current = pag.current;
      table_state.pagination.pageSize = pag.pageSize;
    };
    // 打开弹窗
    const open = (id: string) => {
      table_state.query.channel_id = id;
      popupRef.value.open();
      state.is_open = true;
    }
    // 关闭弹窗
    const close = () => {
      table_state.query.channel_id = "";
      popupRef.value.close();
    }
    const closed = () => {
      state.is_open = false;
    }
    expose({ open, close });
    // 下载二维码
    const downloadQrcode = (record: any) => {
      record.qrcodeLoading = true;
      $spreadGetSalerQrcode({
        saler_id: record.id,
      }).then(res => {
        qrcodeRef.value.open(res.data.url);
      }).finally(() => {
        record.qrcodeLoading = false;
      })
    }
    const editSuccess = () => {
      LTableRef.value.$fetchTableData();
    }
    return () => (
      <>
        <LPopup title="渠道人员列表" ref={popupRef} onClosed={() => { closed() }}>
          <div class={styles.productQrcode}>
            {
              state.is_open && <LTable
                ref={LTableRef}
                service={$promotionChannelSalerService}
                toolbar={table_state.toolbar}
                v-model={table_state}
              >
                <a-table
                  bordered={true}
                  dataSource={table_state.dataSource}
                  columns={table_state.columns}
                  pagination={table_state.pagination}
                  onChange={tableChangeHandler}
                  loading={table_state.loading}
                  rowKey="id"
                  v-slots={{
                    bodyCell: ({ column, record }: any) => {
                      // 操作栏
                      if (column.dataIndex === "operation") {
                        return (
                          <div class="operation">
                            <a-button
                              type="primary"
                              size="small"
                              v-slots={{
                                icon: () => <EditOutlined />,
                              }}
                              onClick={() => { channelSalerAddRef.value.open(table_state.query.channel_id, record) }}
                            >
                              编辑
                            </a-button>
                            <a-button
                              type="primary"
                              size="small"
                              v-slots={{
                                icon: () => <SearchOutlined />,
                              }}
                              loading={record.qrcodeLoading}
                              onClick={() => { downloadQrcode(record) }}
                            >
                              推广海报
                            </a-button>
                          </div>
                        );
                      }
                    },
                  }}
                />
              </LTable>
            }
          </div>
          <Qrcode ref={qrcodeRef} />
        </LPopup>
        <ChannelSalerAdd ref={channelSalerAddRef} onEditSuccess={editSuccess}/>
      </>
    )
  }
})